import React, { Component } from 'react';
import { withRouter, Route } from 'react-router-dom'

// 利用<Route></Route> 组件中的一个children 属性, 当children 值为函数的时候,
// 无论切换什么路由, 都会渲染 children 函数返回的那个组件

class MyNav extends Component {
    render() {
        // console.log(this.props.children);
        const content = this.props.children;
        const url = this.props.to
        const Tag = this.props.tag ? this.props.tag : 'a'
        // 定义样式对象 style
        let styleObj = {};
        return (
            <>
                {/* 
                   Route中的children 对应的函数, 当页面中的路由改变的时候触发, 
                   每次改变路由, 重新执行 (props) => {rerturn <组件></组件>}进而判断是否需要设置style对象
                 */}
                <Route path={url} children={(props) => {
                    if (props.match) {
                        //添加样式
                        styleObj.background = 'red'
                    }
                    return <Tag onClick={this.go} style={styleObj}>{content}</Tag>
                }}></Route>

            </>
        );
    };
    go = () => {
        this.props.history.push(this.props.to)
        // console.log(this.props);
    }
}

export default withRouter(MyNav);
